﻿@page "/chart/polar-stacked-area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.DropDowns

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the polar and radar series with a stacking area type chart for GDP of various countries in recent years.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the polar and radar series with a stacking area type chart. Switching between polar and radar series can be done using <code>Series Type</code> in the property panel.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the polar and radar series with a stacking area type chart can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/polar/#stacked-area'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfChart Title="GDP, Current Prices (in Billions)" Theme="@Theme">
        <ChartTooltipSettings Enable="true">
        </ChartTooltipSettings>
        <ChartLegendSettings Visible="true">
        </ChartLegendSettings>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelPlacement="LabelPlacement.OnTicks" Interval="1" Coefficient="100"></ChartPrimaryXAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="2013" XName="Country" Width="2" YName="GDP_2013" Type="@SeriesType" DrawType="ChartDrawType.StackingArea"></ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="2014" XName="Country" Width="2" YName="GDP_2014" Type="@SeriesType" DrawType="ChartDrawType.StackingArea"></ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="2015" XName="Country" Width="2" YName="GDP_2015" Type="@SeriesType" DrawType="ChartDrawType.StackingArea"></ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="2016" XName="Country" Width="2" YName="GDP_2016" Type="@SeriesType" DrawType="ChartDrawType.StackingArea"></ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Series Type:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="Polar" DataSource="@SeriesTypes">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeSeriesType"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    private ChartSeriesType SeriesType { get; set; } = ChartSeriesType.Polar;
    public List<DropDownData> SeriesTypes { get; set; } = new List<DropDownData>
    {
        new DropDownData() { Type = "Polar" },
        new DropDownData() { Type = "Radar" },
    };
    public List<PolarStackedAreaData> ChartPoints { get; set; } = new List<PolarStackedAreaData>
    {
        new PolarStackedAreaData { Country = "JPN", GDP_2013 = 5156, GDP_2014 = 4849, GDP_2015 = 4382, GDP_2016 = 4939 },
        new PolarStackedAreaData { Country = "DEU", GDP_2013 = 3754, GDP_2014 = 3885, GDP_2015 = 3365, GDP_2016 = 3467 },
        new PolarStackedAreaData { Country = "FRA", GDP_2013 = 2809, GDP_2014 = 2844, GDP_2015 = 2420, GDP_2016 = 2463 },
        new PolarStackedAreaData { Country = "GBR", GDP_2013 = 2721, GDP_2014 = 3002, GDP_2015 = 2863, GDP_2016 = 2629 },
        new PolarStackedAreaData { Country = "BRA", GDP_2013 = 2472, GDP_2014 = 2456, GDP_2015 = 1801, GDP_2016 = 1799 },
        new PolarStackedAreaData { Country = "RUS", GDP_2013 = 2231, GDP_2014 = 2064, GDP_2015 = 1366, GDP_2016 = 1281 },
        new PolarStackedAreaData { Country = "ITA", GDP_2013 = 2131, GDP_2014 = 2155, GDP_2015 = 1826, GDP_2016 = 1851 },
        new PolarStackedAreaData { Country = "IND", GDP_2013 = 1857, GDP_2014 = 2034, GDP_2015 = 2088, GDP_2016 = 2256 },
        new PolarStackedAreaData { Country = "CAN", GDP_2013 = 1843, GDP_2014 = 1793, GDP_2015 = 1553, GDP_2016 = 1529 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public void ChangeSeriesType(ChangeEventArgs<string, DropDownData> args)
    {
        SeriesType = (ChartSeriesType)Enum.Parse(typeof(ChartSeriesType), args.Value.ToString(), true);
    }

    public class DropDownData
    {
        public string Type { get; set; }
    }

    public class PolarStackedAreaData
    {
        public string Country { get; set; }
        public double GDP_2013 { get; set; }
        public double GDP_2014 { get; set; }
        public double GDP_2015 { get; set; }
        public double GDP_2016 { get; set; }
    }
}
